<template>
  <div class="api">
    <el-card style="width: 100%;height: 9.5em" :body-style="{ padding: '10px' }">
      <el-row :gutter="2">
        <el-col :span="5">
          <el-button class="butt">
            <el-row :gutter="15">
              <el-col :span="12">
                <svg class="icons" aria-hidden="true">
                  <use xlink:href="#icon-shouhuihuojian"></use>
                </svg>
              </el-col>
              <el-col :span="12">
                <div class="mun">{{mapData.total}}</div>
                <div class="word">累计API访问</div>
              </el-col>
            </el-row>
          </el-button>
        </el-col>
        <el-col :span="5">
          <el-button class="butt">
            <el-row :gutter="15">
              <el-col :span="12">
                <icon name="Position" color="#409EFF" :size="100"></icon>
              </el-col>
              <el-col :span="12">
                <div class="mun">{{mapData.monthTotal}}</div>
                <div class="word">本周API访问</div>
              </el-col>
            </el-row>
          </el-button>
        </el-col>
        <el-col :span="5">
          <el-button class="butt">
            <el-row :gutter="15">
              <el-col :span="12">
                <svg class="icons" aria-hidden="true" style="width: 7em;height: 7em">
                  <use xlink:href="#icon-laodonglishichangjiandu"></use>
                </svg>
              </el-col>
              <el-col :span="12">
                <div class="mun">{{mapData.loginTotal}}</div>
                <div class="word">累计登录</div>
              </el-col>
            </el-row>
          </el-button>
        </el-col>
        <el-col :span="5">
          <el-button class="butt">
            <el-row :gutter="15">
              <el-col :span="12">
                <icon name="Avatar" color="#409EFF" :size="100"></icon>
              </el-col>
              <el-col :span="12">
                <div class="mun">{{mapData.loginMonthTotal}}</div>
                <div class="word">本周登录</div>
              </el-col>
            </el-row>
          </el-button>
        </el-col>
        <el-col :span="4">
          <el-button class="butt">
            <el-row :gutter="15">
              <el-col :span="12">
                <svg class="icons" aria-hidden="true" style="width: 7em;height: 7em">
                  <use xlink:href="#icon-a-30px-copy"></use>
                </svg>
              </el-col>
              <el-col :span="12">
                <div class="mun">{{mapData.apiTotal}}</div>
                <div class="word">计费接口</div>
              </el-col>
            </el-row>
          </el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="width: 100%;margin-top: 10px" :body-style="{ padding: '10px' }">
      <el-row :gutter="15" style="height: 100%">
        <el-col :span="15">
          <el-collapse :accordion="true" model-value="1">
            <el-collapse-item name="1">
              <template #title>
                作者的话
                <svg class="icon" aria-hidden="true"  style="width: 2em;height: 2em;margin-left: 5px">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
              </template>
              <div>
                一直想要有一个属于自己的项目，来用穿插全部所学，现在终于有啦。本项目从2022.1月开始动工，利用闲暇时间编写，目前在不断完善中！！！
              </div>
            </el-collapse-item>
            <el-collapse-item >
              <template #title>
                技术栈
                <svg class="icon" aria-hidden="true"  style="width: 2em;height: 2em;margin-left: 5px">
                  <use xlink:href="#icon-kexuejishu"></use>
                </svg>
              </template>
              <div>
                后端：spring Boot 2.3.12.RELEASE + Spring Security + MyBatis Plus 3.4.0<br>
                前端：Vue3技术栈 + element-plus<br>
                文件存储：Minio 2021-06-17T00-10-46Z<br>
                数据库：MySql 5.7.35<br>
                缓存：Redis 6.2.6 + canal 1.1.5<br>
                日志：MySql + ELK (后期会上)<br>
                定时任务：XXL-JOB 2.2.0<br>
                搜索引擎：Elasticsearch 7.17.0 （暂时没有用武之地）<br>
                部署方式：jenkins + docker + nginx
              </div>
            </el-collapse-item>
            <el-collapse-item >
              <template #title>
                特点
                <svg class="icon" aria-hidden="true"  style="width: 2em;height: 2em;margin-left: 5px">
                  <use xlink:href="#icon-icon_card_pinpai_nor"></use>
                </svg>
              </template>
              <div>
                1、部门/岗位/角色/用户管理<br>
                2、菜单/系统字典/用户字典/参数管理<br>
                3、精确到按钮的权限设置<br>
                4、丰富的日志采集系统<br>
                5、实时动态的缓存更新<br>
                6、接口次数计费和统计<br>
                7、自动化部署流程<br>
                8、统一文件存储<br>
                9、在线接口调试，实时接口文档<br>
                10、外部API统一管理，在线调试，实时切换数据源<br>
                11、提供后端代码生成器，一键生成后端基础代码<br>
                12、使用主流技术，二次开发方便<br>
              </div>
            </el-collapse-item>
            <el-collapse-item >
              <template #title>
                代码架构
                <svg class="icon" aria-hidden="true"  style="width: 2em;height: 2em;margin-left: 5px">
                  <use xlink:href="#icon-zuzhijiagou"></use>
                </svg>
              </template>
              <div>
                后端代码分为两个部分：公共资源、业务模块<br>
                公共资源：存储公共代码，如全局配置文件、拦截器、工具类、常量、基础公共接口<br>
                业务模块：存储业务代码，分模块存放<br>
                每个业务模块分层如下：<br>
                controller：控制层<br>
                server：业务层<br>
                serverimpl：业务层实现类<br>
                entity：实体类<br>
                mapper：数据库mapper映射接口<br>
                search：搜索实体<br>
                vo：视图实体<br>
                wrapper：包装类
              </div>
            </el-collapse-item>
            <el-collapse-item>
              <template #title>
                后续更新
                <svg class="icon" aria-hidden="true"  style="width: 2em;height: 2em;margin-left: 5px">
                  <use xlink:href="#icon-a-shuaxingengxinshengji"></use>
                </svg>
              </template>
              <div>
                后续将不断更新功能和UI,本人虽不精通前端,但仍会不断的美化UI，以求达到最好的效果，敬请期待！！！
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-col>
        <el-col :span="9">
          <div style="height:53vh;width: 100%" id="homeEcharts">
          </div>
        </el-col>
    </el-row>
    </el-card>
  </div>
</template>

<script>
import Icon from '@/components/Icon'
import * as echarts  from 'echarts'
export default {
  name: 'Home',
  components: { Icon },
  data(){
    return{
      mapData:{},
      echartData:{},
      tag:true,
      option:{
        //标题
        title: {
          text: 'Temperature Change in the Coming Week'
        },
        //提示
        tooltip: {
          trigger: 'axis'
        },
        //x轴
        xAxis: {
          type: 'category',
          data: []
        },
        //y轴
        yAxis: {
          type: 'value'
        },
        //工具栏
        toolbox: {
          show: true,
          feature: {
            myToggle:{
              show:true,//是否显示
              title:'切换数据', //鼠标移动上去显示的文字
              icon:'path://M525.4 721.2H330.9c-9 0-18.5-7.7-18.5-18.1V311c0-9 9.3-18.1 18.5-18.1h336.6c9.3 0 18.5 9.1 18.5 18.1v232.7c0 6 8.8 12.1 15 12.1 6.2 0 15-6 15-12.1V311c0-25.6-25.3-48.9-50.1-48.9h-335c-26.2 0-50.1 23.3-50.1 48.9v389.1c0 36.3 20 51.5 50.1 51.5h197.6c6.2 0 9.3-7.5 9.3-15.1 0-6-6.2-15.3-12.4-15.3zM378.8 580.6c-6.2 0-12.3 8.6-12.3 14.6s6.2 14.6 12.3 14.6h141.4c6.2 0 12.3-5.8 12.3-13.4 0.3-9.5-6.2-15.9-12.3-15.9H378.8z m251.6-91.2c0-6-6.2-14.6-12.3-14.6H375.7c-6.2 0-12.4 8.6-12.4 14.6s6.2 14.6 12.4 14.6h240.8c6.2 0.1 13.9-8.5 13.9-14.6z m-9.2-120.5H378.8c-6.2 0-12.3 8.6-12.3 14.6s6.2 14.6 12.3 14.6h240.8c7.7 0 13.9-8.6 13.9-14.6s-6.2-14.6-12.3-14.6z m119.4 376.6L709 714.1c9.2-12 14.6-27 14.6-43.2 0-39.4-32.1-71.4-71.8-71.4-39.7 0-71.8 32-71.8 71.4s32.1 71.4 71.8 71.4c16.3 0 31.3-5.4 43.4-14.5l31.6 31.5c3.8 3.8 10 3.8 13.8 0 3.8-3.8 3.8-10 0-13.8z m-88.8-23.6c-28.3 0-51.3-22.8-51.3-51s23-51 51.3-51c28.3 0 51.3 22.8 51.3 51s-23 51-51.3 51z',
              onclick:() =>{
                this.tag = ! this.tag
                this.toggleData()
              }
            },
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {},

          }
        },
        series: [
          {
            data: [],
            type: 'line',
            smooth: true,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]
      }
    }
  },
  mounted () {
    this.statisticalData()
    this.chartData()
  },
  methods:{
    //初始化图表
    initEcharts(option){
      let eChartsType = echarts.init(document.getElementById("homeEcharts"))
      // 使用指定的配置项和数据显示图表。
      eChartsType.setOption(option);
    },
    //获取首页统计数据
    statisticalData(){
      this.$http.get('/api/system/record').then(res =>{
          this.mapData = res.data.data
      })
    },
    //获取图表数据
    chartData(){
      this.$http.get('/api/system/statistics').then(res =>{
        this.echartData = res.data.data
        this.option.title.text = res.data.data.v1.title
        this.option.xAxis.data = res.data.data.v1.v
        this.option.series[0].data = res.data.data.v1.k
        this.initEcharts(this.option)
      })
    },
    //切换图表数据
    toggleData(){
      if (this.tag){
        this.option.title.text = this.echartData.v1.title
        this.option.xAxis.data = this.echartData.v1.v
        this.option.series[0].data = this.echartData.v1.k
        this.initEcharts(this.option)
      }else {
        this.option.title.text = this.echartData.v2.title
        this.option.xAxis.data = this.echartData.v2.v
        this.option.series[0].data = this.echartData.v2.k
        this.initEcharts(this.option)
      }
    }
  }
}
</script>

<style scoped>
.api {
  width: 100%;
  min-height: 100%;
/*  background-color:#F2F6FC;*/
}
.icons {
  width: 6em;
  height: 6em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.mun {
  align-content: center;
  font-size: 25px;
  font-weight: 600;
}
.word {
  align-content: center;
  font-size: 15px;
  font-weight: 600;
  margin-top: 2em;
}
.butt {
  height: 8em;
}
</style>
